/* ===================================
版型
===================================*/
* {

    box-sizing: border-box;

}

ul {

    padding: 0;

}

ul a {

    display: inline-block;

    text-decoration: none;

    color: #666;

}

/* ===================================
    布局樣式
    ===================================*/
.menu {

    max-width: 300px;

    margin: 0 auto;

    list-style-type: none;

}

/* ===================================
    動態效果
    ===================================*/
.drop-down {

    position: relative;

}

.submenu {

    position: relative;

    opacity: 0;

    width: 100%;

    z-index: 8;

    transition: opacity 0.5s ease;

}

.submenu-item {

    display: block;

    height: 0px;

    overflow: hidden;

    transition: height 0.5s ease;

}

.drop-down:hover .submenu {

    opacity: 1;

}

.drop-down:hover .submenu-item {

    overflow: visible;

    height: 30px;

}

/* ===================================
    視覺樣式
    ===================================*/
.item {

    width: 100%;

    padding: 10px;

    border: 1px solid #ddd;

}

.item:hover {

    background: #ddd;

}

.submenu-item {

    background: #333;

    color: #eee;

    width: 100%;

    padding-left: 20px;

    line-height: 30px;

}

.submenu-item:hover {

    background: #555;

}

.now .item {

    background: #ddd;

}

.now .submenu {

    opacity: 1;

}

.now .submenu-item {

    background: #555;

    overflow: visible;

    height: 30px;

}